<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>上传视频</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="课程">
          <el-input v-model="$route.query.courseName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="课时">
          <el-input v-model="$route.query.lessonName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="视频上传">
          <input ref="video" type="file">
        </el-form-item>
        <el-form-item label="封面上传">
           <input ref="image" type="file">
        </el-form-item>
        <el-form-item>
          <el-button @click="handleUpload">开始上传</el-button>
          <el-button>返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getImageUploadAddress, getVideoUploadAddress, getAliyunTransCode, getAliyunTransCodePercent } from '@/apis/aliyun'
export default Vue.extend({
  name: 'course-video',
  data() {
    return {
      uploader: null as any,
      imageUrl: '',
      videoId: '',
      form: {
        name: ''
      }
    }
  },
  created() {
    this.initUploader()
  },
  methods: {
    initUploader() {
      this.uploader = new window.AliyunUpload.Vod({
        // userID，必填，只需有值即可。
        userId: '1618139964448548',
        // 上传到视频点播的地域，默认值为'cn-shanghai'，
        // eu-central-1，ap-southeast-1
        region: '',
        // 分片大小默认1 MB，不能小于100 KB，此参数单位默认为 B
        partSize: 1048576,
        // 并行上传分片个数，默认5
        parallel: 5,
        // 网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        // 网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        onUploadstarted: async(uploadInfo: any) => {
          // 调取后端接口获取凭证 setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId)
          let uploadAddressAndAuth
          if (uploadInfo.isImage) {
            const { data } = await getImageUploadAddress()
            uploadAddressAndAuth = data.data
            this.imageUrl = data.data.imageURL
          } else {
            const { data } = await getVideoUploadAddress({
              fileName: uploadInfo.file.name,
              imageUrl: this.imageUrl
            })
            uploadAddressAndAuth = data.data
            this.videoId = data.data.videoId
          }
          this.uploader.setUploadAuthAndAddress(
            uploadInfo,
            uploadAddressAndAuth.uploadAuth,
            uploadAddressAndAuth.uploadAddress,
            uploadAddressAndAuth.videoId || uploadAddressAndAuth.imageId
          )
        },
        // 文件上传成功
        onUploadSucceed: (uploadInfo: any) => {
          console.log(uploadInfo)
        },
        // 文件上传失败
        onUploadFailed: (uploadInfo: any, code: any, message: any) => {
          console.log(uploadInfo, code, message)
        },
        // 文件上传进度，单位：字节
        onUploadProgress: (uploadInfo: any, totalSize: any, loadedPercent: any) => {
          console.log(uploadInfo, totalSize, loadedPercent)
        },
        // 上传凭证或STS token超时
        onUploadTokenExpired: (uploadInfo: any) => {
          console.log(uploadInfo)
        },
        // 全部文件上传结束
        onUploadEnd: async() => {
          console.log('上传结束')
          const video = this.$refs.video as any
          await getAliyunTransCode({
            lessonId: this.$route.query.lessonId,
            coverImageUrl: this.imageUrl,
            fileName: video.files[0].name,
            fileId: this.videoId
          })

          const timer = setInterval(async() => {
            const { data } = await getAliyunTransCodePercent(this.$route.query.lessonId)
            console.log(data.data)
            if (data.data === 100) {
              clearInterval(timer)
              console.log('转码成功')
            }
          }, 2000)
        }
      })
    },
    handleUpload() {
      const video = this.$refs.video as any
      const image = this.$refs.image as any

      const videoFile = video.files[0]
      const imageFile = image.files[0]

      this.uploader.addFile(imageFile, null, null, null, '{"Vod":{}}')
      this.uploader.addFile(videoFile, null, null, null, '{"Vod":{}}')

      // 触发onUploadstarted事件
      this.uploader.startUpload()
    },
    onSubmit() {
      console.log('submit!')
    }
  }
})
</script>
<style lang="scss" scoped>
</style>
